<template>
    <Dialog :title="comInfo.name" :show="true" @close="cancel" :width="300" height="auto" :left="uiLeft" :top="uiTop">
        <div class="box">
            <el-table :data="monomerPropertyRef" border :cell-style="cellStyle2" :header-cell-style="cellStyleSmall"
                :highlight-current-row="false" :max-height="180">
                <el-table-column prop="key" label="字段" :show-overflow-tooltip="true" width="100" />
                <el-table-column prop="value" label="值" :show-overflow-tooltip="true" width="auto">
                    <template #default="scope">
                        <div>
                            <div
                                v-if="scope.row.type == 'String' || scope.row.type == 'Json' || scope.row.type == 'Time'">
                                <el-input type="text" v-model.lazy="scope.row.value" @change="edit(scope.row)" />
                            </div>
                            <div v-else-if="scope.row.type === 'Boolean'">
                                <el-switch v-model="scope.row.value" size="small" @change="edit(scope.row)" />
                            </div>
                            <div
                                v-else-if="scope.row.type === 'Int8' || scope.row.type == 'Int16' || scope.row.type == 'Int32' || scope.row.type == 'Int64' || scope.row.type == 'Float' || scope.row.type == 'Double'">
                                <el-input-number v-model="scope.row.value" controls-position="right" :precision="3"
                                    @change="edit(scope.row)" />
                            </div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="btn">
                <el-button :disabled="!(Object.entries(monomerInfoRef).length)" @click="editMonomer"> 编辑</el-button>
                <el-button :disabled="!(Object.entries(monomerInfoRef).length)" @click="updateMonomer"> 更新</el-button>
            </div>
        </div>
    </Dialog>
    <MonomerEditPropPanel v-if="isShow" @cancel="isShow = false" />
</template>
<script setup lang="ts">
import Dialog from "@/components/Dialog.vue";
import { onMounted, onBeforeUnmount, } from "vue";
import { getProjectManager } from "@/scripts/getProjectManager";
import { createVueDisposer, toVR, } from "vue-xe2-plugin/dist-node/components/xe2/tools";
import { cellStyle2, cellStyleSmall } from "@/scripts/tableStyle";
import MonomerEditPropPanel from "@/components/propPanel/modelser/MonomerEditPropPanel.vue";
import { Vector } from "xbsj-xe2/dist-node/xe2-math";

const props = withDefaults(defineProps<{ comInfo: any }>(), {});
const emits = defineEmits(["cancel"]);
const cancel = () => {
    emits("cancel", props.comInfo.id);
};

const uiLeft = document.body.clientWidth - 10 - 300;

const uiTop = 60;

const d = createVueDisposer(onBeforeUnmount);
const objm = getProjectManager();

const modelser2Manager = getProjectManager().modelser2Manager;
const monomerEdit = modelser2Manager.monomerEdit as any;

const monomerPropertyRef = toVR<any>(d, [monomerEdit, "monomerProperty"]);

const changedMonomerPropertyRef = toVR<any>(d, [monomerEdit, "changedMonomerProperty"]);
const monomerInfoRef = toVR<any>(d, [monomerEdit, "monomerInfo"]);

const isShow = toVR<any>(d, [monomerEdit, "isShow"]);

const edit = (row: any) => {
    changedMonomerPropertyRef.value[row.key] = row.value
}
        
onMounted(() => {
    monomerEdit.init();
});
onBeforeUnmount(() => {
    monomerEdit.clear();
});

//经纬度 转 Geojson
const ArrayAdd = (arr: Iterable<unknown> | null | undefined) => {
    let a = [...new Set(arr)] as [number, number, number][]; //去重加首尾相同
    if (!Vector.equals(a[0], a[a.length - 1])) a.push(a[0]);
    return [...a];
}

const updateMonomer = () => {
    const geojson = {
        type: "Polygon",
        coordinates: [ArrayAdd(monomerEdit.monomerInfo.points)],
    };
    const param = {
        "tileServiceName": modelser2Manager.eSMsTileset.tileServiceName,
        "id": monomerEdit.monomerInfo.id,
        "name": monomerEdit.monomerInfo.name,
        "geojson": JSON.stringify(geojson),
        "minH": monomerEdit.monomerInfo.bottom,
        "maxH": monomerEdit.monomerInfo.ceilling,
        "fileds": {
            ...monomerEdit.changedMonomerProperty
        }
    }
    monomerEdit.updateMonomer(param)
}

const editMonomer = () => {
    isShow.value = true
}

</script>

<style scoped>
.box {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.center-table {
    width: 100%;
}

.edit {
    display: flex;
    justify-content: flex-end;
}

.item1 {
    display: grid;
    grid-template-columns: 95px 1fr;
    align-items: center;
    margin-bottom: 10px;
}

.btn {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}

.el-input-number {
    width: 150px;
    height: 25px;
    text-align: left;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover>td) {
    background-color: transparent !important;
    color: #333 !important;

}

:deep(.el-input-number .el-input__inner) {
    text-align: left !important;
}

:deep(.el-input-number.is-controls-right .el-input__wrapper) {
    padding-left: 11px;
}


:deep(.el-input-number.is-controls-right .el-input-number__increase,
    .el-input-number.is-controls-right .el-input-number__decrease,
    .el-input-number.is-controls-right .el-input-number__increase) {
    --el-input-number-controls-height: 11px !important;
    height: 11px !important;
}

.el-input {
    height: 25px;
    width: 150px;
}
</style>
